<template>
  <div class="vision-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>视界无界</h1>
        <p>打破边界，连接全球优质数字内容</p>
      </div>
    </div>

    <!-- 核心概念 -->
    <section class="concept-section">
      <div class="container">
        <h2>我们的理念</h2>
        <p class="concept-description">视界无界致力于打造一个综合性的数字内容平台，让每个人都能自由探索、创造和分享精彩内容。我们相信技术能够打破物理和文化的边界，连接全球创作者和用户。</p>
        
        <div class="concept-features">
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                <path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="9" y1="9" x2="9.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="15" y1="9" x2="15.01" y2="9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </div>
            <h3>用户至上</h3>
            <p>以用户体验为中心，不断优化产品功能和内容推荐，让每个用户都能发现感兴趣的内容。</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 17l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 12l10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>内容为王</h3>
            <p>汇聚全球优质数字内容，涵盖视频、音乐、动漫、游戏等多个领域，满足不同用户的需求。</p>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polyline points="16 18 22 12 16 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <polyline points="8 6 2 12 8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </div>
            <h3>开放合作</h3>
            <p>与全球内容创作者、媒体机构和技术公司建立合作关系，共同构建开放的数字内容生态。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 -->
    <section class="timeline-section">
      <div class="container">
        <h2>发展历程</h2>
        
        <div class="timeline">
          <div class="timeline-item">
            <div class="timeline-date">2009年</div>
            <div class="timeline-content">
              <h3>平台成立</h3>
              <p>视界无界正式成立，最初专注于提供高清视频内容服务。</p>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-date">2012年</div>
            <div class="timeline-content">
              <h3>内容扩展</h3>
              <p>引入动漫和音乐内容，平台用户突破100万。</p>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-date">2015年</div>
            <div class="timeline-content">
              <h3>移动端布局</h3>
              <p>推出iOS和Android应用，实现多平台覆盖。</p>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-date">2018年</div>
            <div class="timeline-content">
              <h3>AI推荐系统</h3>
              <p>引入人工智能技术，优化内容推荐算法，提升用户体验。</p>
            </div>
          </div>
          
          <div class="timeline-item">
            <div class="timeline-date">2021年</div>
            <div class="timeline-content">
              <h3>全球化战略</h3>
              <p>启动全球化战略，拓展海外市场，用户规模突破1000万。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容分类 -->
    <section class="categories-section">
      <div class="container">
        <h2>内容分类</h2>
        
        <div class="categories-grid">
          <div class="category-card">
            <div class="category-image">
              <img src="https://placehold.co/600x400/00a1d6/FFFFFF?text=视频内容" alt="视频内容">
            </div>
            <div class="category-content">
              <h3>视频内容</h3>
              <p>涵盖电影、电视剧、纪录片、短视频等多种形式的视频内容，满足不同用户的观看需求。</p>
            </div>
          </div>
          
          <div class="category-card">
            <div class="category-image">
              <img src="https://placehold.co/600x400/667eea/FFFFFF?text=音乐内容" alt="音乐内容">
            </div>
            <div class="category-content">
              <h3>音乐内容</h3>
              <p>提供海量音乐资源，包括流行、摇滚、古典、民谣等多种风格，支持在线播放和下载。</p>
            </div>
          </div>
          
          <div class="category-card">
            <div class="category-image">
              <img src="https://placehold.co/600x400/ff6b6b/FFFFFF?text=动漫内容" alt="动漫内容">
            </div>
            <div class="category-content">
              <h3>动漫内容</h3>
              <p>汇集国内外优质动漫资源，包括经典作品和最新番剧，支持高清观看和弹幕互动。</p>
            </div>
          </div>
          
          <div class="category-card">
            <div class="category-image">
              <img src="https://placehold.co/600x400/4ecdc4/FFFFFF?text=游戏内容" alt="游戏内容">
            </div>
            <div class="category-content">
              <h3>游戏内容</h3>
              <p>提供游戏资讯、攻略、评测、视频等内容，为游戏爱好者打造一站式服务平台。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 技术创新 -->
    <section class="tech-section">
      <div class="container">
        <h2>技术创新</h2>
        
        <div class="tech-features">
          <div class="tech-card">
            <h3>5G+4K/8K超高清直播</h3>
            <p>利用5G网络技术，支持4K/8K超高清视频直播，为用户带来沉浸式观影体验。</p>
          </div>
          
          <div class="tech-card">
            <h3>AI智能推荐</h3>
            <p>基于深度学习的推荐系统，能够准确理解用户偏好，提供个性化内容推荐。</p>
          </div>
          
          <div class="tech-card">
            <h3>云存储与分布式架构</h3>
            <p>采用云存储和分布式架构，确保内容高速传输和稳定访问，支持海量用户同时在线。</p>
          </div>
          
          <div class="tech-card">
            <h3>VR/AR沉浸式体验</h3>
            <p>支持VR/AR技术，为用户提供身临其境的沉浸式内容体验，开拓数字内容新领域。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 加入我们入口 -->
    <section class="join-us-section">
      <div class="container">
        <div class="join-us-content">
          <h2>加入我们</h2>
          <p>视界无界正在寻找志同道合的伙伴，一起创造数字世界的无限可能。无论你是技术达人、创意专家还是运营高手，在这里都能找到施展才华的舞台。</p>
          <router-link to="/join-contact" class="btn-join">立即加入</router-link>
        </div>
      </div>
    </section>

    <!-- 友情链接 -->
    <section class="links-section">
      <div class="container">
        <h2>友情链接</h2>
        <div class="links-grid">
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('动漫之家')">动漫之家</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('网易云音乐')">网易云音乐</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('腾讯视频')">腾讯视频</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('爱奇艺')">爱奇艺</a>
          <a href="#" class="link-item" @click.prevent="showLinkComingSoon('B站')">B站</a>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'VisionView',
  methods: {
    // 显示链接即将上线提示
    showLinkComingSoon(linkName) {
      alert(`${linkName} 链接即将上线，敬请期待！`)
    },
  },
}
</script>

<style scoped>
.vision-page {
  min-height: 100vh;
  background-color: var(--background-primary, #ffffff);
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, var(--primary-color, #00a1d6) 0%, var(--secondary-color, #667eea) 100%);
  color: white;
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('');
  background-size: cover;
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.page-header p {
  font-size: 1.5rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

/* 通用容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 核心概念部分 */
.concept-section {
  padding: 100px 0;
  background-color: var(--background-light, #f8f9fa);
}

.concept-section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text-primary, #333);
}

.concept-description {
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-secondary, #666);
  margin-bottom: 60px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.concept-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.feature-card {
  text-align: center;
  padding: 40px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  color: var(--primary-color, #00a1d6);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.2);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.feature-card p {
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 发展历程部分 */
.timeline-section {
  padding: 100px 0;
  background-color: var(--background-primary, #ffffff);
}

.timeline-section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  color: var(--text-primary, #333);
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  width: 2px;
  background-color: var(--primary-color, #00a1d6);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  padding: 20px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
  left: 0;
}

.timeline-item:nth-child(even) {
  left: 50%;
}

.timeline-date {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-color, #00a1d6);
  margin-bottom: 15px;
}

.timeline-content {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.timeline-content:hover {
  transform: translateY(-5px);
}

.timeline-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: var(--text-primary, #333);
}

.timeline-content p {
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 内容分类部分 */
.categories-section {
  padding: 100px 0;
  background-color: var(--background-light, #f8f9fa);
}

.categories-section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  color: var(--text-primary, #333);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.category-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.category-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.category-card:hover .category-image img {
  transform: scale(1.05);
}

.category-content {
  padding: 30px;
}

.category-content h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.category-content p {
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 技术创新部分 */
.tech-section {
  padding: 100px 0;
  background-color: var(--background-primary, #ffffff);
}

.tech-section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 60px;
  color: var(--text-primary, #333);
}

.tech-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.tech-card {
  padding: 40px;
  background-color: var(--background-light, #f8f9fa);
  border-radius: 10px;
  border-left: 4px solid var(--primary-color, #00a1d6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.tech-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--text-primary, #333);
}

.tech-card p {
  color: var(--text-secondary, #666);
  line-height: 1.6;
}

/* 加入我们部分 */
.join-us-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--primary-color, #00a1d6) 0%, var(--secondary-color, #667eea) 100%);
  color: white;
  text-align: center;
}

.join-us-content {
  max-width: 800px;
  margin: 0 auto;
}

.join-us-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.join-us-content p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  line-height: 1.8;
  opacity: 0.9;
}

.btn-join {
  display: inline-block;
  padding: 15px 40px;
  background-color: white;
  color: var(--primary-color, #00a1d6);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-join:hover {
  background-color: var(--background-primary, #ffffff);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* 友情链接部分 */
.links-section {
  padding: 80px 0;
  background-color: var(--background-light, #f8f9fa);
}

.links-section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-primary, #333);
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.link-item {
  display: block;
  text-align: center;
  padding: 15px;
  background-color: white;
  color: var(--text-primary, #333);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  border: 1px solid var(--border-light, #ddd);
}

.link-item:hover {
  background-color: var(--primary-color, #00a1d6);
  color: white;
  transform: translateY(-3px);
  border-color: var(--primary-color, #00a1d6);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .categories-grid,
  .tech-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .page-header h1 {
    font-size: 3rem;
  }
  
  .concept-features {
    grid-template-columns: 1fr;
  }
  
  .timeline::before {
    left: 31px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  
  .timeline-item:nth-child(even) {
    left: 0;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 100px 0;
  }
  
  .page-header h1 {
    font-size: 2.5rem;
  }
  
  .page-header p {
    font-size: 1.2rem;
  }
  
  .concept-section,
  .timeline-section,
  .categories-section,
  .tech-section,
  .join-us-section {
    padding: 80px 0;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .category-image img {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .concept-section,
  .timeline-section,
  .categories-section,
  .tech-section,
  .join-us-section {
    padding: 60px 0;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
  
  .feature-card,
  .tech-card {
    padding: 30px 20px;
  }
  
  .category-content {
    padding: 20px;
  }
  
  .btn-join {
    padding: 12px 30px;
    font-size: 1rem;
  }
}
</style>